import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/pie/lit-pie-half-donut.ts"
import {PieHalfDonutProps} from "../../../echarts/pie/lit-pie-half-donut.ts";

const meta: Meta<PieHalfDonutProps> = {
    title: 'Echarts/LitPieHalfDonut',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PieHalfDonutProps): TemplateResult => {
        return html`
            <lit-pie-half-donut
                    .chartId=${args.chartId}
                    .width=${args.width}
                    .height=${args.height}
                    .title=${args.title}
                    .legend=${args.legend}
                    .radius=${args.radius}
                    .center=${args.center}
                    .angleRange=${args.angleRange}
                    .seriesData=${args.seriesData}
            />`;
    },
    argTypes: {
        chartId: {control: 'text'},
        width: {control: 'text'},
        height: {control: 'text'},
        title: {control: 'object'},
        legend: {control: 'object'},
        radius: {control: 'object'},
        center: {control: 'object'},
        angleRange: {control: 'object'},
        seriesData: {control: 'object'},
    },
}

export default meta;
type Story = StoryObj<PieHalfDonutProps>;

export const Default: Story = {
    args: {
        chartId: 'basic-half-donut-chart',
        width: '1200px',
        height: '600px',
        legend: {
            top: '5%',
            left: 'center'
        },
        radius: ['40%', '70%'],
        center: ['50%', '70%'],
        angleRange: [180, 360],
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
};